<template>
	<div class="table">
		<el-tree
		:data="elTree" 
		:props="defaultProps"
		node-key="label"
		:default-expanded-keys="['全部']"
		accordion 
		@node-click="handleNodeClick"
		class="custom-tree"
		v-loading="loading"
		element-loading-spinner="el-icon-more-outline"
		 :style="{ height: clientHeight + 'px'}"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 12px;">
				<span :name="node.label">
					<i v-if="!data.children"
					:class="node.expanded ? 'el-icon-openFile' : 'el-icon-closeFiles'"></i>
					<i v-else class="el-icon-openFile"></i>{{ node.label }}
				</span>
			</span>
		</el-tree>
	</div>
</template>

<script>
	// selfs / js
	import MedicenCata from '@/external/MedicenCata.js'
	import { EventBus } from '@/external/asetSelf/event-bus.js'; //事件总线
	// 接口
	import { AllTree,getTreeData } from "@/api/systemCatalogue/MedicenCata.js";
	export default {
		components: {
			MedicenCata
		},
	data() {
		return {
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			// str
			CatalogueName:'',
			// number
			clientHeight: 0,//浏览器高度
			dataIndex: 0,
			indexTime:0,
			pageNum: 1, //当前页currentPage
			pageSize: 6,
			totalSize: 10, //总条数
			treeData:[],
			tableData:[],//右侧表格数据源
			//blean
			loading:false,
			elTree:[{ label: '全部', path:'', title:'', icon:'el-icon-news',children:[] }],
			}
		},
		//生命周期
		//窗口改变是触发的事件
		created() {
		  window.addEventListener("resize", this.resizeHandle);
		},
		mounted() {
			this.loadData();
			this.clientHeight = window.innerHeight - 188
		},
		methods:{
			/*
				数据源
			*/
			async loadData(){
				let res = await AllTree({})
				if(res.code === 404){
					this.elTree = this.elTree;
				}else{
					// 赋值给Options
					this.elTree[0].children.push(...res.data)
					console.log(res);
				}
			},
			/*
				about tree
			*/
			async handleNodeClick(data){
				this.CatalogueName = data.label
				this.loading = true;
				let res = await getTreeData({
					strs: this.CatalogueName,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code === 400){
					//验证失败
					setTimeout(() => {
					this.$message({
					  message: res.message,
					  type: 'fail'
					});
					this.tableData = [];
					this.loading = false;
					}, 1500)
				}else{
					// 先赋再传
					this.tableData = res.data.content
					this.totalSize = res.data.totalSize
					this.loading = false;
				}
				let Busobj = {
					data1:this.tableData,
					data2:data,
					totalSize:this.totalSize,
					loading:true
				};
				EventBus.$emit('TreeInfos', Busobj);
			},
		},
		//窗口触发函数
		resizeHandle() {
		  this.clientHeight = document.clientHeight - 188;
		  console.log('窗口发生改变');
		},
	}
</script>

<style lang="less" scoped>
	.table{
		display: flex;
		width: 158px;
		flex-direction: column;
		padding: 12px;
		.el-menu-vertical-demo {
		  // overflow-y: auto; /* 当内容超出设定高度时显示滚动条 */
		}
		// 外部样式穿透
		::v-deep .el-menu{
			border: 0;
		}
		::v-deep .el-menu-item{
			font-size: 12px;
			min-width: 0;
		}
		span{
			font-size: 12px;
		}
	}
</style>